<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Login / Register</title>
    <link rel="stylesheet" href="../static/css/layui.css">
    <style>
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            font-family: '微软雅黑', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        }

        .login-container {
            width: 100%;
            max-width: 400px;
            margin: 100px auto 0;
            padding: 30px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            background: #fff;
        }

        .login-container .login-title {
            text-align: center;
            margin-bottom: 20px;
        }

        .login-container .login-title h2 {
            margin: 0;
        }

        .login-container .layui-btn {
            width: 100%;
            margin-top: 10px;
        }

        .login-container .switch {
            text-align: right;
            margin-top: 10px;
        }

        .login-container .switch a {
            color: #009688;
            text-decoration: none;
        }
    </style>
</head>

<body>

    <div class="login-container">
        <form id="loginForm">
            <div class="login-title">
                <h2>登录</h2>
            </div>
            <div class="layui-form-item">
                <input type="text" name="username1" placeholder="用户名" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-item">
                <input type="password" name="password1" placeholder="密码" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-item">
                <button type="button" class="layui-btn" id="loginBtn">登录</button>
            </div>
            <div class="switch">
                <a href="javascript:void(0);" onclick="switchForm('register')">没有账号？立即注册</a>
            </div>
        </form>
        <form id="registerForm" style="display: none;">
            <div class="login-title">
                <h2>注册</h2>
            </div>
            <!-- 注册表单项 -->
            <div class="layui-form-item">
                <input type="text" name="username2" placeholder="用户名" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-item">
                <input type="password" name="password2" placeholder="密码" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-item">
                <input type="password" name="repassword" placeholder="确认密码" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-item">
                <button type="button" class="layui-btn" id="registerBtn">注册</button>
            </div>
            <div class="switch">
                <a href="javascript:void(0);" onclick="switchForm('login')">已有账号？立即登录</a>
            </div>
        </form>
    </div>

    <!-- 引入 Layui 的 JavaScript 文件 -->
    <script src="../static/js/layui.js"></script>
    <!-- 引入 jQuery -->
    <script src="../static/js/jquery.min.js"></script>

    <script>
        function switchForm(formType) {
            var loginForm = $('#loginForm');
            var registerForm = $('#registerForm');
            if (formType === 'register') {
                loginForm.hide();
                registerForm.show();
            } else {
                registerForm.hide();
                loginForm.show();
            }
        }

        $(document).ready(function () {
            $('#loginBtn').click(function () {
                var username1 = $('input[name="username1"]').val();
                var password1 = $('input[name="password1"]').val();
                // 发送 AJAX 请求进行登录
                $.ajax({
                    url: '/login', // 您的后端登录 API
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ username: username1, password: password1 }),
                    success: function (response) {
                        // 登录成功处理
                        {#alert('登录成功: ' + response.message);#}
                         alert('登录成功' );

                        // 进行页面跳转或其他操作
                        window.location.href = "/index"
                    },
                    error: function (xhr) {
                        // 登录失败处理
                        alert('登录失败: 请检查用户名或密码是否正确');
                    }
                });
            });

            $('#registerBtn').click(function () {
                var username2 = $('input[name="username2"]').val();
                var password2 = $('input[name="password2"]').val();
                var repassword = $('input[name="repassword"]').val();
                // 发送 AJAX 请求进行注册
                $.ajax({
                    url: '/api/register', // 您的后端注册 API
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ username: username2, password: password2, repassword: repassword }),
                    success: function (response) {
                        // 注册成功处理
                        alert('注册成功: ' + response.message);
                        window.location.href = "/login"
                        // 进行页面跳转或其他操作
                    },
                    error: function (xhr) {
                        // 注册失败处理
                        // alert('注册失败: ' + xhr.responseText);
                        alert('注册失败: 用户名已存在或请检查用户名或密码是否正确');
                    }
                });
            });
        });
    </script>

</body>

</html>